import React, { useEffect, useState, useRef } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { Card, Row, Col, Pagination, Tooltip, Empty, Spin } from "antd";
import { UserOutlined } from "@ant-design/icons";
import { getVideoList } from "@/api/search/index";
import to from "await-to-js";
import { Typography } from "antd";

const PublicPage: React.FC = () => {
  const location = useLocation();
  const { categoryId } = location.state || {};
  const [videoList, setVideoList] = useState([]);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(false);
  const navigateTo = useNavigate();

  const searchParams = useRef({
    pageSize: 10,
    pageNum: 1,
    auditState: "1",
    isAsc: "desc",
    orderByColumn: "createTime",
    categoryId: categoryId,
  });

  // 视频播放按钮
  const handlePlay = (videoInfo: any) => {
    console.log(videoInfo);
    // 跳转页面并传递参数
    navigateTo("/home/playPage", { state: { videoInfo } });
  };

  useEffect(() => {
    // 当categoryId变化时更新searchParams
    if (categoryId) {
      searchParams.current.categoryId = categoryId;
      fetchVideoList();
    }
  }, []);

  // 获取视频列表
  const fetchVideoList = async () => {
    setLoading(true);
    const [err, res] = await to(getVideoList(searchParams.current));
    if (!err && res) {
      setVideoList(res.rows || []);
      setTotal(res.total || 0);
    }
    setLoading(false);
  };

  // 页码变化
  const handlePageChange = (page: number, pageSize: number) => {
    searchParams.current.pageNum = page;
    searchParams.current.pageSize = pageSize;
    fetchVideoList();
  };

  return (
    <Spin spinning={loading} tip="加载中...">
      <div className="public-container">
        {videoList.length > 0 && (
          <div className="flex flex-wrap">
            {videoList.map((item: any) => {
              return (
                <div key={item.videoId} className="cursor-pointer">
                  <div
                    onClick={() => handlePlay(item)}
                    className="mr-29px mt-40px w235px h145px mb-5px"
                    style={{
                      borderRadius: "2%",
                      border: "1px solid #999",
                    }}>
                    <img
                      src={item.images ?? ""}
                      alt=""
                      className="absolute w-233px h-144px object-contain"
                      style={{ borderRadius: "3%" }}
                    />
                    <Tooltip title="开始播放">
                      <img
                        style={{
                          width: "40px",
                          height: "40px",
                          marginLeft: "100px",
                          marginTop: "54px",
                        }}
                        className="absolute  cursor-pointer"
                        src={"bigplay.png"}
                        alt=""
                      />
                    </Tooltip>
                  </div>
                  <Typography.Paragraph
                    ellipsis={{ rows: 1, expandable: false }}
                    className=" w240px h-20px"
                    style={{
                      lineHeight: "20px",
                      fontWeight: "600",
                      color: "#444",
                    }}>
                    {item.title}
                  </Typography.Paragraph>
                  <div
                    className=" mt--10px mb-10px"
                    style={{ color: "#666", fontSize: "14px" }}>
                    <span>
                      <UserOutlined />
                      {item.createBy}
                    </span>
                    <span className="ml-20px">{item.createTime}</span>
                  </div>
                </div>
              );
            })}
          </div>
        )}

        {videoList.length === 0 && <Empty />}
        <div
          className="pagination-container"
          style={{ margin: "20px 0", textAlign: "center" }}>
          <Pagination
            current={searchParams.current.pageNum}
            pageSize={searchParams.current.pageSize}
            total={total}
            onChange={handlePageChange}
          />
        </div>
      </div>
    </Spin>
  );
};

export default PublicPage;
